<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>真实强烈烟花效果</title>
    <style>
        body, html {
            margin: 0;
            padding: 0;
            height: 100%;
            overflow: hidden;
            background-color: #000;
            font-family: 'Arial', sans-serif;
        }

        #fireworks-container {
            position: relative;
            width: 100%;
            height: 100%;
        }

        .firework {
            position: absolute;
            width: 5px;
            height: 5px;
            background-color: #fff;
            border-radius: 50%;
            animation: rise 1s ease-out forwards;
            box-shadow: 0 0 5px #fff, 0 0 10px #fff, 0 0 20px #ff0, 0 0 40px #ff0;
        }

        .particle {
            position: absolute;
            width: 3px;
            height: 3px;
            border-radius: 50%;
            animation: explode 1s ease-out forwards, fade 1s ease-out forwards;
            box-shadow: 0 0 2px #fff, 0 0 4px #fff, 0 0 8px #ff0, 0 0 16px #ff0;
        }

        @keyframes rise {
            0% {
                transform: translateY(0);
            }
            100% {
                transform: translateY(-200px);
            }
        }

        @keyframes explode {
            0% {
                transform: scale(1);
            }
            100% {
                transform: scale(3);
            }
        }

        @keyframes fade {
            0% {
                opacity: 1;
            }
            100% {
                opacity: 0;
            }
        }

        #birthday-text {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            font-size: 48px;
            font-weight: bold;
            color: transparent;
            background: linear-gradient(45deg, #ff0000, #ff7300, #fffb00, #48ff00, #00ffd5, #002bff, #7a00ff, #ff00c8, #ff0000);
            background-size: 400%;
            -webkit-background-clip: text;
            background-clip: text;
            animation: text-glow 5s linear infinite;
            opacity: 0;
            transition: opacity 1s ease-in;
        }

        @keyframes text-glow {
            0% {
                background-position: 0 0;
            }
            100% {
                background-position: 400% 0;
            }
        }

        /* 响应式调整 */
        @media (max-width: 768px) {
            #birthday-text {
                font-size: 36px; /* 在手机上减小字体大小 */
            }
        }

        @media (max-width: 480px) {
            #birthday-text {
                font-size: 24px; /* 在更小的屏幕上进一步减小字体大小 */
            }
        }
    </style>
    <script>
        document.addEventListener('click', function(event) {
            createFirework(event.clientX, event.clientY);
        });

        // 添加触摸事件支持
        document.addEventListener('touchstart', function(event) {
            event.preventDefault(); // 防止默认行为
            const touch = event.touches[0];
            createFirework(touch.clientX, touch.clientY);
        });

        function createFirework(x, y) {
            const container = document.getElementById('fireworks-container');

            // 创建烟花上升效果
            const firework = document.createElement('div');
            firework.className = 'firework';
            firework.style.left = `${x}px`;
            firework.style.top = `${y}px`;
            container.appendChild(firework);

            // 播放烟花音效
            const sound = document.getElementById('firework-sound');
            sound.currentTime = 0; // 重置音效
            sound.play();

            // 烟花上升到顶点后爆炸
            setTimeout(() => {
                firework.remove();
                createExplosion(x, y - 200); // 爆炸位置在上升的顶点
                showBirthdayText(); // 显示生日文字
            }, 1000);
        }

        function createExplosion(x, y) {
            const container = document.getElementById('fireworks-container');
            const colors = ['#ff0000', '#00ff00', '#0000ff', '#ffff00', '#ff00ff', '#00ffff', '#ff7300', '#48ff00', '#00ffd5', '#7a00ff'];
            const particleCount = 200; // 增加粒子数量

            for (let i = 0; i < particleCount; i++) {
                const particle = document.createElement('div');
                particle.className = 'particle';
                particle.style.backgroundColor = colors[Math.floor(Math.random() * colors.length)];
                particle.style.left = `${x}px`;
                particle.style.top = `${y}px`;
                container.appendChild(particle);

                const angle = Math.random() * 2 * Math.PI;
                const speed = Math.random() * 6 + 3; // 增加粒子速度
                const vx = Math.cos(angle) * speed;
                const vy = Math.sin(angle) * speed;

                animateParticle(particle, vx, vy);
            }
        }

        function animateParticle(particle, vx, vy) {
            let x = parseFloat(particle.style.left);
            let y = parseFloat(particle.style.top);

            const animation = setInterval(() => {
                x += vx;
                y += vy;
                vy += 0.1; // 重力效果

                particle.style.left = `${x}px`;
                particle.style.top = `${y}px`;

                if (y > window.innerHeight) {
                    clearInterval(animation);
                    particle.remove();
                }
            }, 16);
        }

        function showBirthdayText() {
            const textElement = document.getElementById('birthday-text');
            textElement.textContent = '超人，生日快乐';
            textElement.style.opacity = 1;

            // 文字显示后逐渐消失
            setTimeout(() => {
                textElement.style.opacity = 0;
            }, 3000);
        }
    </script>
</head>
<body>
    <div id="fireworks-container"></div>
    <div id="birthday-text"></div>
    <audio id="firework-sound" src="firework.mp3" preload="auto"></audio>
</body>
</html>